<template>
  <div class="preview-img-wrap">
    <el-dialog
      v-dialogDrag
      title="图片影像预览"
      :visible.sync="dialogVisible"
      class="dialogStyleMiddle"
      :before-close="handleClose"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-carousel ref="previewImg" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)" :autoplay="false" arrow="always" @change="changeCarousek">
        <el-carousel-item v-for="(item,index) in imgList" :key="index" name="index">
          <el-image :src="item.url" fit="contain" style="height: 100%" />
          <!-- <video
            v-if="checkType(item.url)"
            :id="`my-player${index}`"
            controls
            preload="none"
            width="100%"
            height="100%"
            poster="https://img0.baidu.com/it/u=1100818022,3642909785&fm=26&fmt=auto&gp=0.jpg"
          >
            <source src="https://player.youku.com/embed/XMzMwMTYyODMyNA==?autoplay=true&client_id=37ae6144009e277d" type="video/mp4">
          </video> -->
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>

<script>
// 图片下载
import { imgDownLoad } from '@/api/common/upload.js'
export default {
  name: 'Index',
  props: {
    imgIdList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      imgList: [],
      dialogVisible: false // 弹框标识
    }
  },
  computed: {
    checkType() {
      return (url) => {
        // console.log(url);
      }
    }
  },
  watch: {
    imgIdList: {
      handler(val) {
        if (val.length > 0) {
          this.imgList = []
        }
      },
      deep: true, // 深度监听
      immediate: true // 初次监听即执行
    }
  },
  mounted() {
  },
  methods: {
    // 关闭弹框
    handleClose() {
      this.dialogVisible = false
      this.$emit('update:imgIdList', [])
    },
    // 图片回显
    async imgDownLoad(img) {
      this.loading = true
      if (img) {
        const res = await imgDownLoad({ id: img.fileId })
        // 将从后台获取的图片流进行转换
        const url = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        const item = { url, id: img.fileId }
        this.imgList.push(item)
        this.loading = false
      }
    },
    changeCarousek(newIndex, oldIndex) {
      // const img = this.imgList[oldIndex]
      // this.imgDownLoad(img)
    },
    // 预览大图
    previewBigImg() {
      this.dialogVisible = true
      if (this.imgIdList.length > 0) {
        for (const i in this.imgIdList) {
          this.imgDownLoad(this.imgIdList[i])
        }
      }
      // this.$nextTick(() => {
      //   this.$refs.previewImg.setActiveItem(0)
      // })
    }
  }
}

</script>

